<style lang="scss">
  .c-header {
    position    : relative;
    display     : flex;
    align-items : center;

    background-color : var(--header-background);

    margin : 0;
    padding : 1.5em .5em .5em;


    &--dragHandle {
      position : absolute;

      top   : 0;
      right : 0;
      left  : 0;

      height : 2em;

      -webkit-user-select : none;
      -webkit-app-region  : drag;
    }

    &--logo {
      display : block;
      margin : 0 auto;

      color : var(--main-bg-color);
    }

    &--homeIcon, &--settingsIcon {
      width : 2em;
      height : 2em;
      display : block;

      padding : .125em;
    }

    &--settingsBtn {
      border : none;
      background : transparent;
    }

    &--homeIcon {
      fill : var(--header-color);

      &:hover {
        fill : var(--npm-red);
      }

      &:active {
        fill : var(--npm-red-dark);
      }
    }

    &--settingsIcon {
      stroke : var(--header-color);
      stroke-width : 4;

      transition : transform 375ms ease-in-out;

      &:hover {
        stroke    : var(--npm-red);
        transform : rotate( 180deg );
      }

      &:active {
        stroke : var(--npm-red-dark);
      }
    }
  }
</style>

<template>
  <header class="c-header">
    <div class="c-header--dragHandle"></div>

    <a v-link="{ name : 'repo-list-page' }" aria-label="Go home" @click="toggleSettings( false )">
      <svg class="c-header--homeIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M73.9 84.7H26.1c-1.1 0-2-.9-2-2V51.9c0-1.1.9-2 2-2s2 .9 2 2v28.8h43.8V51.9c0-1.1.9-2 2-2s2 .9 2 2v30.8c0 1.1-.9 2-2 2z"/><path d="M82.4 51.8c-.5 0-1-.2-1.4-.6l-31-31-31 31c-.8.8-2 .8-2.8 0-.8-.8-.8-2 0-2.8L48.6 16c.8-.8 2-.8 2.8 0l32.4 32.4c.8.8.8 2 0 2.8-.3.4-.8.6-1.4.6z"/>
      </svg>
    </a>
    <div class="c-header--logo">
      <svg width="45" height="40" viewBox="0 0 34 29" xmlns="http://www.w3.org/2000/svg">
        <title>Forrest logo</title>
        <g fill="none" fill-rule="evenodd">
          <path d="M8 7l7 14.545H1L8 7zM5.9 21.545h4.2V23H5.9v-1.455zM23.9 21.545h4.2V23h-4.2v-1.455zM26 7l7 14.545H19L26 7z" stroke="#F1F1F1"/><path d="M21 26h7L17 2 6 26h7v2.08h8V26z" stroke="#2A333C" fill="#CD3632"/>
        </g>
      </svg>
    </div>
    <button class="c-header--settingsBtn" aria-label="Go to settings" @click="toggleSettings()">
      <svg class="c-header--settingsIcon" xmlns="http://www.w3.org/2000/svg" viewBox="0 0 100 100">
        <path d="M7.5 58.4c1.7.2 3.6.3 5.6.4 1 .1 1.9.8 2.2 1.8.7 2.2 1.6 4.4 2.7 6.4.5.9.4 2.1-.3 2.9-1.4 1.6-2.6 3-3.7 4.3-1.4 1.7-1.3 4.1.3 5.6l5.9 5.9c1.5 1.5 4 1.7 5.6.3 1.3-1.1 2.8-2.3 4.3-3.7.8-.7 1.9-.8 2.9-.3 2 1.1 4.2 2 6.4 2.6 1 .3 1.7 1.2 1.8 2.2.1 2 .3 3.9.4 5.6.2 2.2 2 3.8 4.2 3.8h8.4c2.2 0 4-1.6 4.2-3.8.2-1.7.3-3.6.4-5.6.1-1 .8-1.9 1.8-2.2C62.8 84 65 83.1 67 82c.9-.5 2.1-.4 2.9.3 1.5 1.3 3 2.6 4.3 3.7 1.7 1.4 4.1 1.3 5.6-.3l5.9-5.9c1.5-1.5 1.7-4 .3-5.6-1.1-1.3-2.3-2.7-3.7-4.3-.7-.9-.8-2-.3-2.9 1.1-2 2-4.2 2.6-6.4.3-1 1.2-1.7 2.2-1.8 2-.1 3.9-.3 5.6-.4 2.2-.2 3.8-2 3.8-4.2v-8.4c0-2.2-1.6-4-3.8-4.2-1.7-.2-3.6-.3-5.6-.4-1-.1-1.9-.8-2.2-1.8C84 37.2 83.1 35 82 33c-.5-.9-.4-2.1.3-2.9 1.4-1.6 2.6-3 3.7-4.3 1.4-1.7 1.3-4.1-.3-5.6l-5.9-5.9c-1.5-1.5-4-1.7-5.6-.3-1.3 1.1-2.7 2.3-4.3 3.7-.9.7-2 .8-2.9.3-2-1.1-4.2-2-6.4-2.6-1-.3-1.7-1.2-1.8-2.2-.1-2-.3-3.9-.4-5.6-.2-2.2-2-3.8-4.2-3.8h-8.4c-2.2 0-4 1.6-4.2 3.8-.2 1.7-.3 3.6-.4 5.6-.1 1-.8 1.9-1.8 2.2-2.2.6-4.4 1.5-6.4 2.6-.9.5-2.1.4-2.9-.3-1.6-1.4-3-2.6-4.3-3.7-1.7-1.4-4.1-1.3-5.6.3l-5.9 5.9c-1.5 1.5-1.7 4-.3 5.6 1.1 1.3 2.3 2.7 3.7 4.3.7.8.8 1.9.3 2.9-1.1 2-2 4.2-2.6 6.4-.3 1-1.2 1.7-2.2 1.8-2 .1-3.9.3-5.6.4-2.2.2-3.8 2-3.8 4.2v8.4c-.1 2.2 1.5 4 3.7 4.2zM5.4 45.8c0-1.3 1-2.4 2.3-2.5 1.7-.2 3.6-.3 5.6-.4 1.7-.1 3.2-1.3 3.7-3 .6-2.1 1.5-4.1 2.5-6.1.8-1.5.6-3.4-.5-4.7-1.3-1.5-2.6-3-3.6-4.3-.8-1-.8-2.5.2-3.4l5.9-5.9c.9-.9 2.4-1 3.4-.2 1.3 1.1 2.7 2.3 4.3 3.6 1.3 1.1 3.2 1.4 4.7.5 1.9-1 4-1.9 6.1-2.5 1.7-.5 2.9-2 3-3.7.1-2 .3-3.9.4-5.6.1-1.3 1.2-2.3 2.5-2.3h8.4c1.3 0 2.4 1 2.5 2.3.2 1.7.3 3.6.4 5.6.1 1.7 1.3 3.2 3 3.7 2.1.6 4.1 1.5 6.1 2.5 1.5.8 3.4.6 4.7-.5 1.6-1.4 3-2.6 4.3-3.6 1-.8 2.5-.8 3.4.2l5.9 5.9c.9.9 1 2.4.2 3.4-1.1 1.3-2.3 2.7-3.6 4.3-1.1 1.3-1.4 3.2-.5 4.7 1 1.9 1.9 4 2.5 6.1.5 1.7 2 2.9 3.7 3 2 .1 3.9.3 5.6.4 1.3.1 2.3 1.2 2.3 2.5v8.4c0 1.3-1 2.4-2.3 2.5-1.7.2-3.6.3-5.6.4-1.7.1-3.2 1.3-3.7 3-.6 2.1-1.5 4.1-2.5 6.1-.8 1.5-.6 3.4.5 4.7 1.3 1.5 2.6 3 3.6 4.3.8 1 .8 2.5-.2 3.4l-5.9 5.9c-.9.9-2.4 1-3.4.2-1.3-1.1-2.7-2.3-4.3-3.6-1.3-1.1-3.2-1.4-4.7-.5-1.9 1-4 1.9-6.1 2.5-1.7.5-2.9 2-3 3.7-.1 2-.3 3.9-.4 5.6-.1 1.3-1.2 2.3-2.5 2.3h-8.4c-1.3 0-2.4-1-2.5-2.3-.2-1.7-.3-3.6-.4-5.6-.1-1.7-1.3-3.2-3-3.7-2.1-.6-4.1-1.5-6.1-2.5-.6-.3-1.3-.5-2-.5-1 0-2 .4-2.8 1-1.5 1.3-3 2.6-4.3 3.6-1 .8-2.5.8-3.4-.2l-5.9-5.9c-.9-.9-1-2.4-.2-3.4 1.1-1.3 2.3-2.7 3.6-4.3 1.1-1.3 1.4-3.2.5-4.7-1-1.9-1.9-4-2.5-6.1-.5-1.7-2-2.9-3.7-3-2-.1-3.9-.3-5.6-.4-1.3-.1-2.3-1.2-2.3-2.5v-8.4z"/>
        <path d="M50 73.6C63 73.6 73.6 63 73.6 50 73.6 37 63 26.4 50 26.4S26.4 37 26.4 50C26.4 63 37 73.6 50 73.6zm0-45.5c12.1 0 21.9 9.8 21.9 21.9S62.1 71.9 50 71.9c-12.1 0-21.9-9.8-21.9-21.9S37.9 28.1 50 28.1z"/>
      </svg>
    </button>
  </header>
</template>

<script>
  export default {
    methods : {
      toggleSettings( showSettings ) {
        this.$dispatch( 'toggle-settings', showSettings );
      }
    }
  };
</script>
